<script lang="ts" setup>
import { ref, watch } from 'vue'

const modelValue = ref()
// 入参

// 生命周期

const emit = defineEmits(['input'])

const props = defineProps<{
  formItem: any
  value: any
}>()

const inputChange = (val: any) => {
  if (!val) {
    emit('input', null)
    return
  }
  if (typeof val === 'object' && !Array.isArray(val)) {
    emit('input', val.bm)
  } else {
    emit('input', val)
  }
}

watch(
  () => props.value,
  (val) => {
    modelValue.value = val
  },
  {
    deep: true,
  },
)
</script>
<template>
  <div class="form-item">
    <el-input
      v-if="props.formItem.type === 'input'"
      v-model="modelValue"
      clearable
      @input="inputChange"
    ></el-input>
    <el-input-number
      style="width: 100%"
      v-model="modelValue"
      v-if="props.formItem.type === 'number'"
      clearable
      @change="inputChange"
    ></el-input-number>
    <el-select
      v-model="modelValue"
      placeholder=""
      clearable
      @change="inputChange"
      v-if="formItem.type === 'select'"
      style="width: 100%"
    >
      <el-option
        v-for="item in props.formItem.data"
        :key="item.dm"
        :label="item.mc"
        :value="item.dm"
      >
      </el-option>
    </el-select>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
